<template>
  <div class="bg">
    <div class="login">
      <br /><br />
      <span>账户注册</span><br /><br />
      <i>用户名称：</i><input type="text" placeholder="请输入账户名称" v-model="user_id" /><br /><br />
      <i>用户账号：</i><input type="text" placeholder="请输入账号" v-model="user_acc"/><br /><br />
      <i>输入密码：</i><input type="password" placeholder="请输入密码" v-model="user_password"/><br /><br />
      <i>确认密码：</i><input type="password" placeholder="请确认密码" v-model="confirm_password" /><br /><br />
      <div class="con"></div>
      <button class="but_res" @click="getInfo" >注  册</button>
      <button class="but_exit"> <router-link to="/">返  回</router-link> </button>
      <!--  -->
    </div>
    <div class="font">欢 迎 来 到 聊 天 系 统</div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      user_id:'冯阳',
      user_acc:'1314520',
      user_password:'fy1314520',
      confirm_password:'fy1314520'
    }
  },

  mounted() {
  //引入外部md5的js文件，写法如下
  const md5 = document.createElement('script');
  md5.type = 'text/javascript';
  md5.src = 'https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js';
  document.body.appendChild(md5);
  console.log(this.num1);
},
  methods: {
    getInfo(){
      console.log(this.user_id+this.user_acc+this.user_password);

      $.ajax({
				url:" http://localhost:9000/server/user",
				type:"POST",
        data:
          JSON.stringify(
          {
            userName:this.user_id,
            account:this.user_acc,
            password:md5(this.user_password)
          }
          )
        ,
        datatype:'json',
        contentType:'application/json',
		    success:function(result,textStatus){


		        		// alert("注册成功！！！");
                console.log(result);
                if(result.id = -1){
                  alert("账户被注册");
                }else{
                  alert("账户注册成功");
                }

		        },
			    error:function(xhr,errorMessage,e){
			    	//代码写错了自动进入error，可以不写
			    	alert("系统异常！");
			    }
			});
		}

  },

};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.bg {
  width: 100%;
  height: 100vh;
  background: url(https://ts1.cn.mm.bing.net/th/id/R-C.c7eb9f9882c230bd3a6003a949643ab7?rik=F4Ac%2bjXctFKTlg&riu=http%3a%2f%2fwww.yulumi.cn%2fgl%2fuploads%2fallimg%2f201120%2f3-201120130101.jpg&ehk=mqcFMT9pwWyaUvJRaSxIRld678vuSDVyqjlxPHDAhaM%3d&risl=&pid=ImgRaw&r=0)
    no-repeat;
  background-size: 100% 100%;
}
.login {
  position: relative;
  width: 700px;
  height: 390px;
  margin: 0 auto;
  background: #eee;
  opacity: 0.7;
  text-align: center;
  box-shadow: 5px 10px 10px 10px #999;
  border-radius: 20px;
  top: 200px;
  & > span {
    font-size: 30px;
    font-weight: bolder;
    font-family: "微软雅黑";
    color: #322;
  }
  & > i {
    font-size: 20px;
    font-style: italic;
    color: #322;
  }
  & > input {
    width: 300px;
    height: 20px;
    outline: none;
    background: #eee;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 3px solid #666;
    font-size: large;
    font-style: italic;
  }
  & > .but_res {
    float: left;
    margin-left: 30px;
    width: 100px;
    height: 40px;
    background: paleturquoise;
    font-size: 20px;
    font-family:'宋体';
    border:1px solid #666;
    border-radius: 5px;
    &:hover{
      background:skyblue;
      color: snow;
    }
  }
  & > .but_exit {
    float: right;
    margin-right: 30px;
    width: 100px;
    height: 40px;
    background: paleturquoise;
    font-size: 20px;
    font-family:'宋体';
    border:1px solid #666;
    border-radius: 5px;
    &:hover{
      background:skyblue;
      color: snow;
    }
    & > a {
      text-decoration: none;
      color: #000;
    }
  }
  & > .con{
    height: 16px;
  }
}
.font {
  position: absolute;
  font-size: 40px;
  width: 400px;
  height: 50px;
  // background: palegoldenrod;
  top: 75px;
  left: 35%;
  font-weight: bolder;
  font-family: "微软雅黑";
  color: peru;
  text-shadow: 10px 10px 10px #999;
}
</style>
